<template>
		<div class="search">
			<div class="item" v-for="(item) in searchMsg" :key="item.id">
				<div @click="clickSearchItem(item.title)">
					{{item.title}}
				</div>
			</div>
	</div>
</template>

<script>
export default {
	props:{
		searchMsg:{
			type:Array,
			default:()=>[]
		},
	},
methods: {
	clickSearchItem(title){	
		console.log(title)
		if(this.$route.path==="/index"){
			console.log(title)
			this.$emit("clickSearchItemForBlog",title)
		}else{
		this.$emit("clickSearchItemForFriend",title)

		}
	},

},
}
</script>

<style lang="less" scoped>
.search{
        position: absolute;
				margin-top: 15px;
				display: inline-block;
				border-radius: 10px;
				padding: 10px;
        background-color: rgba(255,255,255, .9);
        z-index: 999;
			}
			.item{
				width: 170px;
				height: 30px;
        border-bottom: 1px solid rgba(0, 0, 0, .5);
        overflow: hidden;
        text-overflow: ellipsis;
				white-space: nowrap;
				line-height: 35px;
				transition: all .3s;
				&:hover{
					background-color: rgba(0, 0, 0, .1);
					border-radius: 5px;
				}
			}
			.search::before{
				content: '';
				position: absolute;
				top: -20px;
				z-index: 19;
				border: 10px solid ;
				border-color: transparent transparent rgba(255,255,255, .9) ;   
			}

@media screen and (max-width: 765px) {
	.search{
        position: absolute;
				margin-top: 15px;
				display: inline-block;
				border-radius: 10px;
				padding: 10px;
        background-color: rgba(255,255,255, .9);
        z-index: 99999999;
			}
}
</style>